<template>
  <div class="containerBox wrap">
    <!-- 查询form -->
    <cusCard>
      <cusButton color="#0052D9" @click="addHandler" v-hasPerm="20">
        <i-ep-plus />添加
      </cusButton>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">

      <el-table :data="menuList" highlight-current-row row-key="id" height="600px" border :loading="loading"
        :header-cell-style="{ background: '#F3F3F4', color: '#323233', }" :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      }">
        <el-table-column prop="name" label="名称" fixed="left" min-width="180" />
        <el-table-column label="图标">
          <template #default="{ row }">
            <svg-icon :icon-class="row.icon" size="20" />
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template #default="{ row }">
            <el-tag effect="dark" v-if="row.resourceType == '0'" type="warning">系统</el-tag>
            <el-tag effect="dark" v-if="row.resourceType == '1'" type="success">目录</el-tag>
            <el-tag effect="dark" v-if="row.resourceType == '2'" type="danger">菜单</el-tag>
            <el-tag effect="dark" v-if="row.resourceType == '3'" type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="unitLevelCodeName" label="归属" />
        <el-table-column prop="url" label="节点路由" width="150" />
        <el-table-column prop="filePath" label="文件路径" width="250" />
        <el-table-column prop="seq" label="排序号" />
        <el-table-column prop="gmtModify" label="更新时间" width="180" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="{ row }">
            <cusButton color="#1E6FFF" size="small" @click="modifyHandler(row)" v-hasPerm="30">修改</cusButton>
            <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`删除确认${row.name}吗?`"
              @confirm="deleteHandler(row)">
              <template #reference>
                <cusButton color="#FF4746" size="small" v-hasPerm="40">删除</cusButton>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>

    </cusCard>

    <editDialog ref="editRef" @handleGetMenuTree="handleGetMenuTree"></editDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqAllMenuTree, reqDeleteMenu } from "@/api/business/menu";
import editDialog from "./components/editDialog.vue";
const router = useRouter();

const menuForm = ref({
  menuName: "",
});

const menuList = ref([]);
const loading = ref(false);
const editRef = ref();
const modifyHandler = (row) => {
  console.log("table数据", row);
  editRef.value.show(row.id);
};

// 删除菜单、目录项
const deleteHandler = (row) => {
  reqDeleteMenu({ id: row.id }).then((res) => {
    if (res.code == 1) {
      ElMessage.info("删除成功");
      getAllMenuTree();
    }
  });
};

// 添加按钮
const addHandler = () => {
  editRef.value.show();
};

// 查询所有菜单资源
const getAllMenuTree = () => {
  loading.value = true;
  reqAllMenuTree({ returnSystem: true }).then((res) => {
    if (res.code == 1) {
      loading.value = false;
      menuList.value = res.data;
    }
  });
};
const handleGetMenuTree = () => {
  getAllMenuTree();
};
onMounted(() => {
  getAllMenuTree();
});
</script>

<style lang="scss" scoped></style>